<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单数据提交</title>
		
	</head>
	<body>
		<div id="app">
			<!-- vue使用双向数据绑定的结构
				案例: 1.input文本输入框
				2.textarea 文本域
				3.select下拉框
				4.radio 单选框
				5.checkbox复选框
			 -->
			 
			 <form action="xxxx">
				 <h1>表单数据提交-数据封装</h1>
				 姓名:<input type="text" v-model="user.username" /> <br>
				 详情:<textarea v-model="user.info"></textarea> <br>
				 城市:<select name="city" v-model="user.city" multiple="true">
					 <option value="北京">北京</option>
					 <option value="上海">上海</option>
					 <option value="成都">成都</option>
				 </select><br>
				 性别:
					<input type="radio" value="男" name="1" v-model="user.sex
					"/>男
					<input type="radio" value="女" name="1"/>女
				 
			 </form>
			 
		</div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					user:{
						username: '',
						info: '添加用户详细信息',
						city: ['北京','上海'],
						sex: '男'
					}
					
					
				},
			
				methods: {
				
				}
			})
		</script>
		
	</body>
</html>

